<template>
  <el-select class="width-100" filterable clearable :value="value" @change="onChange">
    <el-option
      v-for="option in options"
      :key="option.code"
      :label="option.name"
      :value="option.code"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'area-picker',
  model: {
    prop: 'val',
    event: 'change'
  },
  props: {
    val: String,
  },
  data() {
    return {
      value: this.val,
    };
  },
  computed: {
    options() {
      return this.$store.getters['user/districts'];
    }
  },
  watch: {
    val(val) {
      this.value = val;
    }
  },
  mounted() {
    this.$store.dispatch('user/getDistrictsList');
  },
  methods: {
    getLabel () {
      const target = this.options.find(item => item.code === this.value)
      return target ? target.name : ''
    },
    onChange(e) {
      this.$emit('change', e);
    },
  }
};
</script>
